<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">

			<view class="title">签到</view>

		</view>

		<!-- 签到按钮 -->
		<view class="btn_box">
			<view class="punch-btn" :class="[isPunched ? 'disabled' : 'active']" @click="handlePunch">
				<text>{{ isPunched ? '已签到' : '签到' }}</text>
			</view>
		</view>



		<!-- 打卡统计 -->
		<view class="">

		</view>
		<!-- <view class="stats-container">
      <view class="section-title">本月上课天数统计</view>
      <view class="stats-grid">
        <view class="stats-item">
          <text class="value">{{ stats.normalDays }}</text>
          <text class="label">正常天数</text>
        </view>
        <view class="stats-item">
          <text class="value">{{ stats.lateDays }}</text>
          <text class="label">迟到天数</text>
        </view>
        <view class="stats-item">
          <text class="value">{{ stats.absentDays }}</text>
          <text class="label">缺勤天数</text>
        </view>
      </view>
    </view> -->


	</view>
</template>

<script>
	import {saveSignIn} from '../../api/index.js'
	export default {
		data() {
			return {
				location: '北京市海淀区XX大厦',
				currentTime: '',
				currentDate: '',
				isPunched: false,
				punchButtonText: '下班打卡',
				todayRecords: [{
					time: '09:05',
					type: '上班打卡',
					result: '正常'
				}],
				stats: {
					normalDays: 15,
					lateDays: 2,
					earlyDays: 1,
					absentDays: 0
				},
				weekdays: ['日', '一', '二', '三', '四', '五', '六'],
				calendarDates: this.generateCalendarDates()
			};
		},
		onLoad() {
			this.updateDateTime();
			setInterval(() => {
				this.updateDateTime();
			}, 1000);
		},
		methods: {
			// 更新当前日期时间
			updateDateTime() {
				const now = new Date();
				const hours = now.getHours().toString().padStart(2, '0');
				const minutes = now.getMinutes().toString().padStart(2, '0');
				const seconds = now.getSeconds().toString().padStart(2, '0');
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0');
				const day = now.getDate().toString().padStart(2, '0');

				this.currentTime = `${hours}:${minutes}:${seconds}`;
				this.currentDate = `${year}年${month}月${day}日`;
			},

			// 生成日历数据
			generateCalendarDates() {
				const dates = [];
				const daysInMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();

				// 填充当月日期
				for (let i = 1; i <= daysInMonth; i++) {
					const status = this.getRandomStatus(); // 模拟打卡状态
					dates.push({
						day: i,
						status: status
					});
				}

				return dates;
			},

			// 获取随机打卡状态（仅用于演示）
			getRandomStatus() {
				const random = Math.random();
				if (random < 0.7) return 'normal'; // 正常
				if (random < 0.85) return 'late'; // 迟到
				if (random < 0.95) return 'early'; // 早退
				return null; // 未打卡
			},

			// 根据状态获取图标类
			getIconClass(status) {
				switch (status) {
					case 'normal':
						return 'icon-success';
					case 'late':
						return 'icon-late';
					case 'early':
						return 'icon-early';
					default:
						return '';
				}
			},

			// 打卡处理
			handlePunch() {
				if (!this.isPunched) {
					saveSignIn({
						signInUid: '',
						token: JSON.parse(uni.getStorageSync('token'))
					}).then(res => {
						if (res.data.code == 200) {
							this.isPunched = true
							uni.showToast({
								title: '签到成功',
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "error",
							});
						}
					})
					return;
				}else{
					return;
				}

			},

			// 返回上一页
			back() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_2440033_vl7n48n0n2.eot');
		src: url('https://at.alicdn.com/t/font_2440033_vl7n48n0n2.eot?#iefix') format('embedded-opentype'),
			url('https://at.alicdn.com/t/font_2440033_vl7n48n0n2.woff2') format('woff2'),
			url('https://at.alicdn.com/t/font_2440033_vl7n48n0n2.woff') format('woff'),
			url('https://at.alicdn.com/t/font_2440033_vl7n48n0n2.ttf') format('truetype'),
			url('https://at.alicdn.com/t/font_2440033_vl7n48n0n2.svg#iconfont') format('svg');
	}

	.container {
		background-image: linear-gradient(to bottom, #656bf0, #0094ff, #00b5ff, #00d2ff, #00ebff);
		height: 100vh;
		padding-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	// 导航栏
	.navbar {
		height: 200rpx;
		line-height: 260rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		font-weight: 500;
		color: #fff;

		.left,
		.right {
			width: 80rpx;
			text-align: center;
			font-size: 40rpx;
		}
	}

	// 状态卡片
	.status-card {
		background-color: #fff;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.location {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;

			.iconfont {
				margin-right: 10rpx;
			}

			.icon-arrow-right {
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}

		.time {
			text-align: center;
			margin-bottom: 20rpx;

			.current-time {
				font-size: 72rpx;
				font-weight: bold;
				color: #333;
			}

			.date {
				font-size: 28rpx;
				color: #666;
				margin-top: 10rpx;
			}
		}

		.status {
			text-align: center;

			.status-text {
				font-size: 32rpx;
				color: #333;
			}

			.detail {
				font-size: 28rpx;
				color: #666;
				margin-top: 10rpx;
			}
		}
	}

	.btn_box {
		display: flex;
		justify-content: center;


	}

	// 打卡按钮
	.punch-btn {
		height: 250rpx;
		width: 250rpx;
		line-height: 250rpx;
		margin: 0 30rpx;
		background-color: #1c19e88c;
		border-radius: 250rpx;
		text-align: center;
		font-size: 36rpx;
		color: #fff;
		box-shadow: 0 6rpx 16rpx rgba(22, 119, 255, 0.3);
		transition: all 0.3s;

		&:active {
			transform: scale(0.98);
		}

		&.disabled {
			background-color: #3AE732;
			box-shadow: none;
		}
	}

	// 容器通用样式
	.record-container,
	.stats-container,
	.calendar-container {
		background-color: #fff;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 30rpx;
	}

	// 打卡记录列表
	.record-list {
		.record-item {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #F5F5F5;

			&:last-child {
				border-bottom: none;
			}

			.time {
				font-size: 32rpx;
				color: #333;
			}

			.status {
				text-align: right;

				.type {
					font-size: 28rpx;
					color: #666;
				}

				.result {
					font-size: 28rpx;
					color: #1677FF;
				}
			}
		}
	}

	// 统计信息
	.stats-grid {
		display: flex;
		justify-content: space-around;

		.stats-item {
			width: 50%;
			text-align: center;
			padding: 20rpx 0;

			.value {
				font-size: 40rpx;
				font-weight: bold;
				color: #333;
			}

			.label {
				font-size: 28rpx;
				color: #666;
				margin-top: 10rpx;
			}
		}
	}

	// 日历
	.calendar {
		.weekdays {
			display: flex;
			margin-bottom: 20rpx;

			.weekday {
				width: 14.28%;
				text-align: center;
				font-size: 28rpx;
				color: #666;
			}
		}

		.dates {
			display: flex;
			flex-wrap: wrap;

			.date-item {
				width: 14.28%;
				height: 100rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.day {
					font-size: 30rpx;
					color: #333;
				}

				.status {
					margin-top: 6rpx;

					.iconfont {
						font-size: 20rpx;
					}

					.icon-success {
						color: #52C41A;
					}

					.icon-late {
						color: #FAAD14;
					}

					.icon-early {
						color: #F5222D;
					}
				}
			}
		}
	}
</style>